<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <TodoHeader :addTodo="addTodo" />
      <TodoList :todos="todos" :delTodo="delTodo" />
      <TodoFooter :todos="todos" :delCompleteTodos="delCompleteTodos" :selectAllTodos="selectAllTodos" />
    </div>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoList from './components/TodoList.vue'
import TodoFooter from './components/TodoFooter.vue'

export default {
  data () {
    return {
      todos: JSON.parse(window.localStorage.getItem('todos_key') || '[]')
    }
  },
  methods: {
    addTodo (todo) {
      this.todos.unshift(todo)
    },
    delTodo (index) {
      this.todos.splice(index, 1)
    },
    delCompleteTodos () {
      this.todos = this.todos.filter(item => !item.complete)
    },
    selectAllTodos (check) {
      this.todos.forEach(item => {
        item.complete = check
      })
    }
  },
  watch: {
    todos: {
      deep: true, // 深度监视
      handler: function (newVal, oldVal) {
        window.localStorage.setItem('todos_key', JSON.stringify(newVal))
      }

    }
  },
  components: {
    TodoHeader,
    TodoList,
    TodoFooter
  }
}
</script>

<style>
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
